import React from 'react'
// import {observer,inject} from "mobx-react"
import "./index.css";
import { Carousel, WingBlank,Grid,Icon } from 'antd-mobile';
import {shoppinglist,isLogin} from '../../api/index'
import {withRouter} from "react-router-dom"
import Star from '../listresult/star'
// @observer
@withRouter
 class firstPage extends React.Component {
    constructor(){
        super()
        this.state = {
            data: ['1', '2'],
            imgHeight: 176,
            nowCity:"",
            timer:'',
            id:[221,260,215,251,260,245,234,211],
            id2:[241,254,236,265,231,229,217,232],
            name:['川湘菜','麻辣烫','包子粥店','鲜花蛋糕','日韩料理','果蔬生鲜','汉堡薯条',
            '披萨意面'],
            name2:['甜品饮品','商超便利','美食','简餐','新店特惠','准时达','预定早餐','土豪推荐'],
            image:['https://fuss10.elemecdn.com/9/7c/9700836a33e05c2410bda8da59117jpeg.jpeg',
          'https://fuss10.elemecdn.com/3/c7/a9ef469a12e7a596b559145b87f09jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/17/244241b514affc0f12f4168cf6628jpeg.jpeg',
      'https://fuss10.elemecdn.com/8/83/171fd98b85dee3b3f4243b7459b48jpeg.jpeg',
    'https://fuss10.elemecdn.com/6/1a/1e0f448be0624c62db416e864d2afjpeg.jpeg',
  'https://fuss10.elemecdn.com/4/34/ea0d51c9608310cf41faa5de6b8efjpeg.jpeg',
'https://fuss10.elemecdn.com/b/7f/432619fb21a40b05cd25d11eca02djpeg.jpeg',
'https://fuss10.elemecdn.com/7/b6/235761e50d391445f021922b71789jpeg.jpeg'],
            image2:['https://fuss10.elemecdn.com/2/35/696aa5cf9820adada9b11a3d14bf5jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/da/f42235e6929a5cb0e7013115ce78djpeg.jpeg',
      'https://fuss10.elemecdn.com/b/7e/d1890cf73ae6f2adb97caa39de7fcjpeg.jpeg',
    'https://fuss10.elemecdn.com/d/38/7bddb07503aea4b711236348e2632jpeg.jpeg',
  'https://fuss10.elemecdn.com/a/fa/d41b04d520d445dc5de42dae9a384jpeg.jpeg',
'https://fuss10.elemecdn.com/3/84/8e031bf7b3c036b4ec19edff16e46jpeg.jpeg',
'https://fuss10.elemecdn.com/d/49/7757ff22e8ab28e7dfa5f7e2c2692jpeg.jpeg',
'https://fuss10.elemecdn.com/e/7e/02b72b5e63c127d5bfae57b8e4ab1jpeg.jpeg'],
            arr:[]
          }
          this.headerRef=React.createRef();
          this.carouselRef=React.createRef();
    }
      componentDidMount() {
        console.log(this.headerRef.current.clientHeight)
        console.log(this.carouselRef.current)
        
        // window.addEventListener("scroll",this.watchScroll)
        window.addEventListener('scroll', this.watchScroll);
        // simulate img loading
        var geohash =JSON.parse(localStorage.getItem("geohash"));
        if(!geohash){
            geohash={
                latitude:"31.84178",
                longitude:"118.504669",
                name:"浦口区桥林街道横埂"
            }
        }
       this.setState({
           nowCity:geohash.name
       })
       this.timer = setTimeout(() => {
          this.setState({
            data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn'],
          });
        }, 100);
        // 调用商品列表接口
        shoppinglist(geohash.latitude,geohash.longitude)
        .then(res=>{
          this.setState({
            arr:res.data
          })
          // console.log(this.state.arr)3
        })
      }
      watchScroll(event){
        // console.log(1)
        // console.log(document.body.clientHeight)
      }
      componentWillUnmount(){
        //清除轮播图
        clearInterval(this.timer)
      }
      toChanceCity(){
        this.props.history.push("/home")
      }
      toLogin(){
         //获取接口信息
         isLogin().then(res=>{
          console.log(res.data.id)
          if(!res.data.avatar){
              this.props.history.push("/login")
          }else{
            this.props.history.push("/app/mine")
          }
      })
      }
      toChannel(list,e){
        console.log(list)
        console.log(e)
        this.props.history.push("/app/search?sortid="+e.id+"&name="+e.text)
      }
      todetail(id){
        console.log(id)
        this.props.history.push("/shangpinxq?restaurantId="+id)
        // console.log(this.props.location)
        let routePath= this.props.location.pathname+this.props.location.search
        localStorage.setItem("routePath",routePath)
      }
    render(){
      const data1 = Array.from(new Array(8)).map((text,i) => ({
        icon: this.state.image[i],
        text: this.state.name[i],
        id:this.state.id[i]
      }));
      const data2 = Array.from(new Array(8)).map((text,i) => ({
        icon: this.state.image2[i],
        text: this.state.name2[i],
        id:this.state.id2[i]
      }));
      const datalist=[data1,data2]
     
        return(
          
            <div className='firstPage-container'>
              <div className="firstPage-container-header" ref={this.headerRef}>
                     <Icon type="search" className="firstPage-container-main-leftIcon" onClick={this.toChanceCity.bind(this)} />
                     <div className="showCityName">{this.state.nowCity}</div>
                     <span className="switchCity" onClick={this.toLogin.bind(this)}></span>
                 </div>
                {/* 列表 */}
                <div className='firstPage-list' ref={this.carouselRef}> 
                <WingBlank>
        <Carousel
          autoplay={false}
          infinite={true}
        >
          {this.state.data.map((val,index) => (
            <a
              key={val}
              style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
            >
              <div>
    <Grid onClick={this.toChannel.bind(this,datalist[index])} data={datalist[index]} activeStyle={false} hasLine={false}/>
  </div>
            </a>
          ))}
        </Carousel>
      </WingBlank>
                </div>
                <div>
            </div>
            {/* 商家列表 */}
            <div className='firstPage-container-businesslists'>
            <span className="firstPage-container-businesslist-title">附近商家</span>
            {this.state.arr.map((item,index) =>{
              return (  
                <li className='shop_li' key={item.id} onClick={this.todetail.bind(this,item.id)}>
                    <img src={`//elm.cangdu.org/img/${item.image_path}`} alt="" />
                    <div className='shop_li_rightdiv'>
                        <div className='shop_li_topl'>
                            <div className='shop_li_topl-left'>
                                <span className='shop_li_pp'>品牌</span>
                                <p className='shop_li_title'>{item.name}</p>
                            </div>
                            <span>保准票</span>
                        </div>

                        <div className='shop_li_middle'>
                            <div className='shop_li_middle_l'>
                                <Star></Star>
                                <p>
                                    <span className='shop_li_middle_pf'>{item.rating}</span>
                                    <span>月售
                        <i>{item.recent_order_num}</i>
                                        单
                    </span>

                                </p>
                            </div>


                            <span className='list_fnzslg'>
                                <i>蜂鸟专送</i>
                                <i>准时达</i>
                            </span>

                        </div>


                        <div className='shop_li_bottom'>
                            <div>
                                <p>
                                    ￥
                        <span className='shop_li_bottom_psf'>
                                       {item.float_minimum_order_amount}
                        </span>
                                    起送/配送费约￥
                        <span>
                                        {item.float_delivery_fee}
                        </span>
                                </p>
                            </div>

                            <div>
                                    <span>{item.distance}</span>/
                                    <span>{item.order_lead_time}</span>
                       </div>


                        </div>


                    </div>
                </li>
              // <div className='businesslist' key={index} onClick={this.todetail.bind(this,item.id)}>
              //   {/* 左 */}
              // <img src={'//elm.cangdu.org/img/'+item.image_path}
              //   className='merchandisePictures'/>
              //   {/* 中 */}
              //   <div className='box'>
              //   <span className='brand'>品牌</span>
              //   <span className='merchandiseName'>{item.name}</span>
              //   <br />
              //   <span className='stars'>星星</span>
              //   <span className='score'>{item.rating}</span>
              //   <span className='monthlySales'>月销售{item.recent_order_num}单</span>
              //   <br />
              //   <span className='delivering'>￥{item.float_minimum_order_amount}起送&nbsp;/</span>
              //   &nbsp;
              //   <span className='money'>配送费约￥{item.float_delivery_fee}</span>
              //   </div>
              //   {/* 右 */}
              //   <div className='rightBox'>
              //     <span className='ticket'>保准票</span>
              //     <br />
              //     <span className='hummingbird'>蜂鸟专送</span>
              //     <span className='onTime'>准时达</span>
              //     <br />
              //     <span className='distance'>{item.distance} /</span>
              //     <span className='time'>{item.order_lead_time}</span>
              //   </div>
              // </div>
               ) 
             })}
            </div>
            </div>
        )
    }
}

export default firstPage